<template>
  <div v-if="list" class="dragLabel-wrapper ui form">
    <draggable element="div" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true"
               @end="isDragging=false" @change="hlChange">
      <transition-group type="transition" :name="'flip-list'" tag="div">
        <div v-for="(val,index) in list" class="ui compact message" :class="{mydisabled:val.disable}" :key="index">
          {{val.title}}
          <i v-if="type=='remove'" class="icon circular tiny remove" @click="removeItem(index)"></i>
          <i v-if="type=='disable'" class="icon circular tiny minus" @click="disableItem(index)"></i>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import RP from 'src/util/common/drag';
  import draggable from 'vuedraggable';
  import logic from '_logic';


  export default {
    data() {
      return {
        list: null,
        conf: null,
        editable: true,
        isDragging: false,
        show: true,
        delayedDragging: false
      }
    },
    components: {
      draggable
    },
    methods: {
      removeItem(index) {
        this.list.splice(index, 1)
      },
      disableItem(index) {
        let tmp = this.list[index];
        tmp.disable=!this.list[index].disable;
        this.$set(this.list, index, tmp)
      },
      hlChange() {
      },
      onMove({relatedContext, draggedContext}) {
        return RP.onMove(this, relatedContext, draggedContext)
      },
      getTopMenuConf_not_auth() {
          let url = tool.getApi(this,'Editget','getTopMenuConf');
          let param = {
          }
          util.getDataCom(this, url, param, (rs) => {
              this.conf=rs
              this.hl_disable();
          });
      },
      getTopMenuConf() {
        if(this.is_auth) {
            let menu_auth = logic.edit.getEditVo(this, 'menu_auth');
            if(menu_auth) {
                this.conf = menu_auth.top_menu;
                this.hl_disable();
                return;
            }

        }
          this.getTopMenuConf_not_auth();
      },
        hl_disable(){
            this.list=this.draglist.map(obj=> {
                let tmp = this.conf.find(menu => {
                    return obj.id == menu.id
                });
                if(tmp)
                    obj.disable=tmp.disable
                return obj
            })
        }
    },
    watch: {
      list(newValue) {
        this.$emit('setdragList', newValue);
      },
      isDragging(newValue) {
        if (newValue) {
          this.delayedDragging = true
          return
        }
        this.$nextTick(() => {
          this.delayedDragging = false
        })
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 0,
          group: 'description',
          disabled: !this.editable,
          ghostClass: 'ghost'
        };
      },
    },
    props: ['draglist','type','is_auth'],
    created() {
      this.getTopMenuConf()
    },
    destroyed() {
    },
    mounted() {
    }
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>@import "../../common/style/mixin";

@dir: "edit/";

.flip-list-move {
  transition: transform 0.5s;
}

.dragLabel-wrapper {
  .sortMenu();
  .messageIcon();
}
</style>
